<template>
  <div id="header">
    <div class="logo">
      <img src="https://z3.ax1x.com/2021/05/11/gan8aQ.png" alt="" width="131" />
    </div>
    <div class="btn">内容管理</div>
    <div class="navbar">
      <el-menu
        :default-active="activeIndex2"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="rgba(0, 102, 255, 1)"
        text-color="#fff"
        active-text-color="#ffd04b"
        ><el-submenu index="1">
          <template slot="title">
            <i class="iconfont iconUser">&#xe606;</i>
            admin
          </template>
          <div class="userinfo">
            <div>
              <h5>账户信息</h5>
              <el-link type="primary" class="updataPass">修改密码</el-link>
            </div>
            <div>登录用户：admin</div>
            <div>上次登录：2018-04-28 18:00:00</div>
            <div>登录地区：广东省 广州市 (Ip:183.18.18.31)</div>
          </div>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title">
            <el-badge :value="4" class="item">
              <i class="iconfont iconmessage">&#xe636;</i>
            </el-badge>
          </template>
          <div class="messagenav">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="业务消息" name="first" class="first">
                <div>
                  <h6>花生米（2018-04-28）预发布公告</h6>
                  <p>2018-04-28 02:00:00</p>
                </div>
                <div>
                  <h6>花生米（2018-04-28）预发布公告</h6>
                  <p>2018-04-28 02:00:00</p>
                </div>
                <div>
                  <h6>花生米（2018-04-28）预发布公告</h6>
                  <p>2018-04-28 02:00:00</p>
                </div>
                <div class="checkall">
                  <span>查看全部</span>
                </div>
              </el-tab-pane>
              <el-tab-pane label="系统公告" name="second" class="second">
                <div>
                  <h6>花生米（2018-04-28）预发布公告</h6>
                  <p>2018-04-28 02:00:00</p>
                </div>
                <div>
                  <h6>花生米（2018-04-28）预发布公告</h6>
                  <p>2018-04-28 02:00:00</p>
                </div>
                <div>
                  <h6>花生米（2018-04-28）预发布公告</h6>
                  <p>2018-04-28 02:00:00</p>
                </div>
                <div class="checkall">
                  <span>查看全部</span>
                </div>
              </el-tab-pane>
              <el-tab-pane label="升级公告" name="third" class="third">
                <div>
                  <h6>花生米（2018-04-28）预发布公告</h6>
                  <p>2018-04-28 02:00:00</p>
                </div>
                <div>
                  <h6>花生米（2018-04-28）预发布公告</h6>
                  <p>2018-04-28 02:00:00</p>
                </div>
                <div>
                  <h6>花生米（2018-04-28）预发布公告</h6>
                  <p>2018-04-28 02:00:00</p>
                </div>
                <div class="checkall">
                  <span>查看全部</span>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title">
            <i class="iconfont iconmenu">&#xe65e;</i>
          </template>
          <div class="quickmenu">
            <h5>快捷菜单</h5>
            <el-link type="primary" class="desgin">添加设置</el-link>
          </div>
          <div class="foodMessage">
            <span>食品档案</span>
            <span>食品库存</span>
            <span>食品库存明细</span>
          </div>
          <div class="foodMessDetail">
            <span>终端销售交易明细</span>
            <span>终端财务收银明细</span>
            <span>终端销售交易汇总</span>
          </div>
          <div class="foodMoney">
            <span>终端财务收银汇总</span>
            <span>—— ——</span>
            <span>—— ——</span>
          </div>
        </el-submenu>
        <el-submenu index="4">
          <template slot="title">
            <i class="iconfont iconclose" @click="goFirst">&#xe62a;</i>
          </template>
        </el-submenu>
        <el-submenu index="5">
          <template slot="title">
            <i class="iconfont iconclose" @click="close">&#xe77b;</i>
          </template>
        </el-submenu>
      </el-menu>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex2: "1",
      activeName: "second",
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    close() {
      this.$router.push("/login");
    },
    goFirst() {
      this.$router.push("/home/first");
    },
  },
};
</script>

<style lang="scss" scoped>
@font-face {
  font-family: "iconfont"; /* Project id 2540265 */
  src: url("//at.alicdn.com/t/font_2540265_508ms7f3t65.woff2?t=1620800505885")
      format("woff2"),
    url("//at.alicdn.com/t/font_2540265_508ms7f3t65.woff?t=1620800505885")
      format("woff"),
    url("//at.alicdn.com/t/font_2540265_508ms7f3t65.ttf?t=1620800505885")
      format("truetype");
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
  color: #fff;
}
.iconfont.iconUser {
  font-size: 30px;
  position: relative;
  top: -8px;
}
.iconfont.iconmessage {
  position: relative;
  top: -15px;
  font-size: 30px;
}
.iconfont.iconmenu {
  font-size: 20px;
  position: relative;
  top: -4px;
}
.iconfont.iconclose {
  font-size: 25px;
  position: relative;
  top: -5px;
}
.item {
  margin-top: 10px;
}
#header {
  height: 50px;
  overflow: hidden;
  background-color: rgba(0, 102, 255, 1);
  .logo {
    float: left;
    margin: 7px 0 0 40px;
  }
  .btn {
    float: left;
    width: 81px;
    background: url("../../assets/images/btn.png") no-repeat;
    margin-left: 30px;
    line-height: 50px;
    text-align: center;
    color: #fff;
  }
  .navbar {
    float: right;
    margin-right: 100px;
  }
}
.messagenav {
  padding: 5px 10px;
  width: 260px;
  background-color: #fff;
  margin-top: -10px;
  .first,
  .second,
  .third {
    div {
      h6 {
        font-size: 13px;
        color: #666;
        line-height: 20px;
      }
      p {
        font-size: 12px;
        color: #ccc;
      }
    }
    .checkall {
      line-height: 40px;
      text-align: center;
      span {
        color: #333;
      }
    }
  }
}
.el-menu.el-menu--popup {
  padding: 0 !important;
}
.userinfo {
  width: 380px;
  background-color: #fff;
  div {
    height: 40px;
    &:first-child {
      height: 62px;
      background-color: #e8f2ff;
      h5 {
        float: left;
        color: #333;
      }
      .updataPass {
        float: right;
        margin-top: 20px;
      }
    }
    &:nth-child(n + 1) {
      padding-left: 10px;
      padding-right: 10px;
    }
  }
}
.quickmenu {
  height: 62px;
  width: 390px;
  background-color: #fff;
  background-color: #e8f2ff;
  h5 {
    float: left;
    margin-left: 10px;
  }
  .desgin {
    float: right;
    margin-top: 20px;
    margin-right: 10px;
  }
}
.foodMessage {
  height: 40px;
  display: flex;
  line-height: 40px;
  font-size: 13px;
  padding-left: 40px;
  background-color: #fff;
  span {
    flex: 1;
  }
}
.foodMessDetail {
  height: 40px;
  display: flex;
  line-height: 40px;
  background-color: #fff;
  font-size: 13px;
  padding-left: 10px;
  span {
    flex: 1;
  }
}
.foodMoney {
  height: 40px;
  display: flex;
  line-height: 40px;
  font-size: 13px;
  padding-left: 40px;
  background-color: #fff;
  span {
    flex: 1;
  }
}
</style>
